<template>
  <el-card shadow="hover" class="mt-10">
    <!-- 1. 引入百度地图API JS文件 -> index.html -->
    <!-- 2. 准备一个具备宽高的DOM容器，需要id选择器 -->
    <div id="bmap-container"></div>
  </el-card>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";

defineOptions({
  name: "BMap",
});

window.initBMap = () => {
  // 3. 创建地图实例
  const map = new BMapGL.Map("bmap-container");
  // 4. 设置地图中心点坐标
  const point = new BMapGL.Point(114.1, 22.5);
  // 5. 地图初始化，同时设置地图展示级别
  map.centerAndZoom(point, 12);
  // 开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);
  // 设置地图类型为地球模式
  // map.setMapType(BMAP_EARTH_MAP);

  const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
  map.addControl(cityCtrl);
};

// 文档：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/helloworld
onMounted(() => {
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=TTGYdO4B5tLc4MZZGylIZ9ZspCGM00uY&callback=initBMap";
  document.body.appendChild(script);
});
</script>

<style scoped lang="scss">
.mt-10 {
  margin-top: 10px;
}

#bmap-container {
  height: 500px;
}
</style>
